/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/19 4:29 下午
 * @version V1.0
 */
import React from 'react';
import styles from './index.less';
import { Input, Form, Button, Table } from 'antd';
import { connect } from 'umi';

const User = ({ Users: { dataSource, keyword, limit, offset }, dispatch, loading }) => {
    const [form] = Form.useForm();
    const search = () => {
        form.validateFields().then(values => {
            const { keyword } = values;
            dispatch({
                type: 'Users/getUserList',
                payload: {
                    keyword,
                    limit,
                    offset,
                },
            });
        });
    };
    const empty = () => {
        form.resetFields();
        dispatch({
            type: 'Users/getUserList',
            payload: {
                keyword: '',
                limit: 10,
                offset: 0,
            },
        });
    };
    const searchByOffset = (offset) => {
        dispatch({
            type: 'Users/getUserList',
            payload: {
                keyword,
                limit,
                offset: offset -1,
            },
        });
    };
    const columns = [
        {
            title: '用户',
            align: 'left',
            render: (item) => {
                return (
                    <>
                        <img
                            style={{ width: '40px', height: '40px', borderRadius: '50%', marginRight: '10px' }}
                            src={item.avatar} alt=""
                        />
                        {item.nick_name}
                    </>
                );
            },
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
            align: 'left',
        },
        {
            title: '生日',
            dataIndex: 'birthday',
            align: 'left',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            align: 'left',
        },

        {
            title: '地址',
            // dataIndex: "enterSchoolTime",
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        {`${item.province} ${item.city}`}
                    </div>
                );
            },
        },
    ];
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerFilter}>
                <Form
                    layout="inline"
                    form={form}
                >
                    <Form.Item
                        label="关键字"
                        name="keyword"
                    >
                        <Input placeholder="用户名、手机号"/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" style={{ marginRight: '16px' }} onClick={search}>查询</Button>
                        <Button type="primary" onClick={empty}>清空</Button>
                    </Form.Item>
                </Form>
            </div>
            <div className={styles.pageContainerTable}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='user_id' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource.list}
                    pagination={{
                        total: dataSource.total,// 总记录数
                        defaultPageSize: 10, // 默认显示条数
                        showQuickJumper: true, // 快速跳转
                        // showSizeChanger: true, // 一页展示数据条数
                        onChange: (offset) => searchByOffset(offset),
                        showTotal: () => {
                            return `共${dataSource.total}条`;
                        },
                    }}
                />
            </div>
        </div>
    );
};


export default connect(({ Users, dispatch, loading }) => ({
    Users,
    dispatch,
    loading: loading.effects['Users/getUserList'],
}))(User);
